import React, {useState} from 'react';
import { useMedia } from 'react-use';
import SearchTagBar from "../../components/SearchTagBar";
import Logo from '../../assets/logo.svg';
import LogoSimple from '../../assets/logoSimple.svg';
import {useNavigate} from "react-router-dom";
import {Button} from "antd";

interface NavProps {
    updateSearch: (searchTag: string) => void;
}
const Navbar: React.FC<NavProps> = ({updateSearch}) => {
    const shortScreen = useMedia( '(max-width: 1000px)' );

    const logoSrc = shortScreen ? LogoSimple : Logo;

    const navigate = useNavigate();

    const [isAdmin, setIsAdmin] = useState<boolean>(true);

    // 跳转到管理员页面
    const jumpAdmin = () => {
        navigate('/admin/');
    };

    return (
        <header className="navbar">
            <div style={{position:"absolute", left:"15px"}}>
                <img className="logoIcon" src={logoSrc} alt="logo"></img>
            </div>
            <SearchTagBar updateSearch={updateSearch}></SearchTagBar>

            {(isAdmin &&
            <Button type={"primary"}
                    style={{marginRight:"10%"}}
                    onClick={jumpAdmin}>前往后台
            </Button>
            )}
        </header>
    );
};

export default Navbar;